<template>
  <div class="auth-record">
    <el-row>
      <!-- 未通过原因弹框 -->
      <el-dialog title="未通过原因"
                 :visible.sync="dialogVisible"
                 width="30%">
        <el-input type="textarea"
                  :rows="4"
                  v-model="textarea"
                  :disabled="true">
        </el-input>
        <span slot="footer"
              class="dialog-footer">

          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <el-col :span="24"
              style="margin-top:20px;">
        <el-table :data="tableData"
                  height="700"
                  border
                  :header-cell-style="{background:'#f5f5f5'}">
          <el-table-column label="序号"
                           align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index+(page - 1)*10 + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.user_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ scope.row.job_name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sms_total"
                           label="审核时间"
                           align="center"
                           show-overflow-tooltip>

          </el-table-column>
          <el-table-column prop="sms_total"
                           label="未通过原因"
                           align="center"
                           show-overflow-tooltip>

          </el-table-column>
          <el-table-column label="操作"
                           width="220px"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         @click="lookReason(scope.row)">查看原因
              </el-button>
              <el-button size="mini"
                         type="text"
                         @click="onEdit(scope.row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24"
              id="footerBox">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page="page"
                       :page-size="pagesize"
                       :page-sizes="[10]"
                       layout="total,  sizes,prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { AccountReviewApi } from '@/services/AccountReview'
// import EditUserInfoDialog from '@/components/EditUserInfo/EditUserInfoDialog'
export default {

  data () {
    return {
      total: 0,
      tableData: [{}],
      currentPage: 1,
      page: 1,
      pagesize: 10,
      dialogVisible: false,
      textarea: ''
    }
  },
  methods: {
    // 当前页面
    handleCurrentChange (val) {

    },
    // 查看原因
    lookReason (row) {
      this.dialogVisible = true
    },
    // 编辑
    onEdit (row) {
      this.$message('完善信息弹框组件正在完善中……')
    },
    // 获取审核记录列表
    getAuditList () {
      AccountReviewApi.getAuditList().then(res => {
        console.log(res, 'get audit list')
      })
    }

  },
  created () {
    this.getAuditList()
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.auth-record {
  padding: 20px;
}
</style>
